<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打字游戏</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="background-animation"></div>
    
    <div class="settings-container hide" id="settings">
        <div class="settings-card">
            <h2><i class="fas fa-sliders-h"></i> 游戏设置</h2>
            <form id="settings-form">
                <div class="form-group">
                    <label for="difficulty"><i class="fas fa-tachometer-alt"></i> 难度级别</label>
                    <select id="difficulty" class="styled-select">
                        <option value="easy">简单模式</option>
                        <option value="medium" selected>中等模式</option>
                        <option value="hard">困难模式</option>
                    </select>
                </div>
                <button type="button" class="close-btn"><i class="fas fa-times"></i> 关闭</button>
            </form>
        </div>
    </div>

    <button class="settings-btn floating-btn" id="settings-btn" title="游戏设置">
        <i class="fas fa-cog"></i>
    </button>

    <div class="game-container" id="game-container">
        <header>
            <h1>打字游戏</h1>
        </header>
        
        <div class="game-card">
           
            <button id="start-game-btn" class="play-again-btn">
                <i class="fas fa-play"></i> 开始游戏
            </button>
            <div class="word-display" id="word"></div>
            
            <div class="input-container">
                <input type="text" id="text" placeholder="在此输入上面的单词..." disabled>
                <i class="fas fa-keyboard input-icon"></i>
            </div>
            
            <div class="stats-container">
                <div class="stat-box">
                    <div class="stat-label"><i class="fas fa-star"></i> 当前分数</div>
                    <div class="stat-value" id="score">0</div>
                </div>
                <div class="stat-box timer">
                    <div class="stat-label"><i class="fas fa-clock"></i> 剩余时间</div>
                    <div class="stat-value" id="time">10</div>
                </div>
            </div>
        </div>
    </div>

    <div class="end-game-container hide" id="end-game-container">
        <div class="end-game-card">
            <div class="result-icon">
                <i class="fas fa-trophy"></i>
            </div>
            <h1>游戏结束!</h1>
            <div class="final-score">
                你的最终分数是: <span id="final-score">0</span>
            </div>
            <div class="action-buttons">
                <button class="play-again-btn" onclick="window.location.reload()">
                    <i class="fas fa-redo"></i> 再玩一次
                </button>
                <button class="share-btn">
                    <i class="fas fa-share-alt"></i> 分享成绩
                </button>
            </div>
        </div>
    </div>


    <script src="script.js"></script>
</body>
</html>